<!-- Include Thebelab for interactive code if it's enabled -->
{% if site.use_thebelab_button %}

<!-- Display Thebelab button in each code cell -->
{% include js/thebelab-cell-button.html %}
<script src="https://unpkg.com/thebelab@latest/lib/index.js" async></script>
<script>
    /**
     * Add attributes to Thebelab blocks
     */

    const initThebelab = () => {
        const addThebelabToCodeCells = () => {
            console.log("Adding thebelab to code cells...");
            // If Thebelab hasn't loaded, wait a bit and try again. This
            // happens because we load ClipboardJS asynchronously.
            if (window.thebelab === undefined) {
                setTimeout(addThebelabToCodeCells, 250)
            return
            }

            // If we already detect a Thebelab cell, don't re-run
            if (document.querySelectorAll('div.thebelab-cell').length > 0) {
                return;
            }

            // Find all code cells, replace with Thebelab interactive code cells
            const codeCells = document.querySelectorAll('.input_area pre')
            codeCells.forEach((codeCell, index) => {
                const id = codeCellId(index)

                // Clean up the language to make it work w/ CodeMirror and add it to the cell
                dataLanguage = "{{ kernelName }}"
                dataLanguage = detectLanguage(dataLanguage);
                codeCell.setAttribute('data-language', dataLanguage)
                codeCell.setAttribute('data-executable', 'true')

                // If the code cell is hidden, show it
                var inputCheckbox = document.querySelector(`input#hidebtn${codeCell.id}`);
                if (inputCheckbox !== null) {
                    setCodeCellVisibility(inputCheckbox, 'visible');
                }
            });

            // Remove the event listener from the page so keyboard press doesn't
            // Change page
            document.removeEventListener('keydown', initPageNav)
            keyboardListener = false;

            // Init thebelab
            thebelab.bootstrap();

            // Remove copy buttons since they won't work anymore
            const copyAndThebeButtons = document.querySelectorAll('.copybtn, .thebebtn')
            copyAndThebeButtons.forEach((button, index) => {
                button.remove();
            });

            // Remove outputs since they'll be stale
            const outputs = document.querySelectorAll('.output *, .output')
            outputs.forEach((output, index) => {
                output.remove();
            });

            // Find any cells with an initialization tag and ask ThebeLab to run them when ready
            var thebeInitCells = document.querySelectorAll('div.tag_thebelab-init');
            thebeInitCells.forEach((cell) => {
                console.log("Initializing ThebeLab with cell: " + cell.id);
                cell.querySelector('.thebelab-run-button').click();
            });
        }

        // Add event listener for the function to modify code cells
        const thebelabButtons = document.querySelectorAll('[id^=thebelab], [id$=thebelab]')
        thebelabButtons.forEach((thebelabButton,index) => {
            if (thebelabButton === null) {
                setTimeout(initThebelab, 250)
                return
            };
            thebelabButton.addEventListener('click', addThebelabToCodeCells);
        });
    }

    // Initialize Thebelab
    initFunction(initThebelab);

// Helper function to munge the language name
var detectLanguage = (language) => {
    if (language.indexOf('python') > -1) {
        language = "python";
    }
    return language;
}
</script>
{% endif %}
